<template>
  <div class="content" v-loading="loading">
    <div class="header">
      <div>
        <el-button size="small" type="primary" @click="onExportClick">导出数据</el-button>
      </div>
      <!-- <FormSearch
        ref="formSearch"
        :forms="searchForm"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      /> -->
      <el-form
      ref="from"
      :model="query"
      :inline="true"
    >
    <el-form-item label="" >
      <el-date-picker

          v-model="rongDate"
          size="mini"
          clearable
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :type="'datetimerange'"
          :format="'yyyy-MM-dd HH:mm:ss'"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
        />
    </el-form-item>
      <el-form-item label="" >
        <el-select
         
          v-model="query.commissionStatus"
          size="mini"
          clearable
          placeholder="选择收益类型"
        >
          <!-- <el-option  label="请选择" :value="0" /> -->
          <el-option  label="未收益" :value="2" />
          <el-option  label="已收益" :value="3" />
          <el-option  label="已失效" :value="4" />
        </el-select>
      </el-form-item>

      <el-form-item label="" >
        <el-select
         
          v-model="query.orderStatus"
          size="mini"
          clearable
          placeholder="请选择订单状态"
        >
          <el-option  label="待支付" :value="1" />
          <el-option  label="已支付待核销" :value="5" />
          <el-option  label="已核销（已完成）" :value="10" />
          <el-option  label="已取消（订单未支付）" :value="15" />
          <el-option  label="已失效（关闭）" :value="20" />
        </el-select>
      </el-form-item>
      <el-form-item label="" ><el-input  v-model="query.mobile" size="mini" clearable placeholder="请输入用户账号" /></el-form-item>
      <el-form-item label="" ><el-input  v-model="query.orderNo" size="mini" clearable placeholder="请输入订单编号" /></el-form-item>
      <el-form-item label="" ><el-input  v-model="query.serviceMobile" size="mini" clearable placeholder="请输入推广者" /></el-form-item>
      
      
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    <!-- <div class="top">
      <el-button size="small" type="primary" @click="onExportClick">导出数据</el-button>
    </div> -->
    <el-table
      class="table-box"
      :data="tableData"
      style="width:100%;"
      :max-height="screenHight"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="订单ID" prop="id" width="150"/>
      <!-- <el-table-column label="商品ID" prop="num_iid" width="120"/> -->
      <el-table-column label="购买用户" prop="buyName" width="210"/>
      <el-table-column label="付款金额" prop="payAmount" width="140"/>
      <el-table-column label="预计收益" prop="commission" width="120"/>
      <el-table-column label="结算收益" prop="actualCommission" width="120"/>

      <el-table-column label="创建时间">
        <template slot-scope="scope">
         <span> {{parseTime(scope.row.createdAt)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间">
        <template slot-scope="scope">
         <span> {{parseTime(scope.row.settleAt)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" prop="orderStatusText">
        <!-- <template slot-scope="scope">
          <p v-if="Number(scope.row.status) === 0">订单付款</p>
          <p v-if="Number(scope.row.status) === 1">订单结算</p>
          <p v-if="Number(scope.row.status) === 2">订单失效</p>
        </template> -->
      </el-table-column>
      <el-table-column label="结算状态" prop="commissionStatusText">
        <!-- <template slot-scope="scope">
          <p v-if="Number(scope.row.itaoke_status) === 0">待收益</p>
          <p v-if="Number(scope.row.itaoke_status) === 1">已收益</p>
          <p v-if="Number(scope.row.itaoke_status) === 2">已失效</p>
          <p v-if="Number(scope.row.itaoke_status) === 3">冻结</p>
        </template> -->
      </el-table-column>
      <el-table-column label="推广者" prop="parentName"/>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <span class="text">
          已结算收益：￥{{ settle_revenue }}, 未结算预估收益: ￥{{ unsettle_revenue }}
        </span>
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          :page-sizes="[20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
// import FormSearch from '@/components/FormSearch'
import {  getTaokeCPSOrders, getIncomesStatistic } from '@/api/myProfit'
import { API_BASE_URL } from '@/config'
export default {
  components: {
    // FormSearch
  },
  data() {
    const mobile = this.$route.params.mobile || ''
    return {
      form: {
      },
      page: 1,
      size: 20,
      defaultMobile: '',
      height: 710,
      unsettle_revenue: 0, // 未结算收益
      settle_revenue: 0, // 已结算收益
      rongDate:[],
      query:{
        pageNum:1,
        pageSize:20,
        mobile:this.$route.query.mobile?this.$route.query.mobile:'',
        serviceMobile:'',
        orderNo:'',
        beginTime:'',
        endTime:'',
        orderStatus:undefined,
        commissionStatus:undefined,
        partnerId:sessionStorage.getItem('partnerId'),
    

      },
      searchForm: {
        form: [
          {
            type: 'datePicker',
            rangeType: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            key: 'createTime',
            label: '订单时间:'
          },
          {
            type: 'select',
            key: 'income_status',
            placeholder: '请选择收益状态',
            options: [
              {
                label: '待收益',
                value: '0'
              },
              {
                label: '已收益',
                value: '1'
              },
              {
                label: '已失效',
                value: '2'
              },
              {
                label: '冻结',
                value: '3'
              }
            ]
          },
          {
            type: 'select',
            key: 'status',
            placeholder: '请选择订单状态',
            options: [
              {
                label: '订单付款',
                value: '0'
              },
              {
                label: '订单结算',
                value: '1'
              },
              {
                label: '订单失效',
                value: '2'
              }
            ]
          },
          {
            type: 'input',
            key: 'order_no',
            placeholder: '请输入订单编号'
          },
          {
            type: 'input',
            key: 'mobile',
            placeholder: '请输入用户账号',
            default: mobile
          },
          {
            type: 'input',
            key: 'agentname',
            placeholder: '请输入推广者'
          }
        ]
      },
      total: 0,
      tableData: [],
      loading: false
    }
  },
  created() {
    this.height = Number(localStorage.getItem('height'))
  },
  mounted() {
    const mobile = this.$route.params.mobile
    this.defaultMobile = mobile
    // let params = {
    //   page: 1
    // }
    // let statisticParams = {}
    // if (mobile) {
    //   params.mobile = mobile
    //   statisticParams.order_user_mobile = mobile
    // }
    this.getData(this.query)
    // this.getStatistic(statisticParams)
  },
  methods: {
    async getData(params) {
      let listRes = await getTaokeCPSOrders(this.query)
      if (listRes.code === 200) {
        // if (params.is_export == 1) {
        //   window.open(
        //     `${API_BASE_URL}/admin/download/zip/${listRes.data[1].download_token}`
        //   )
        // } else {
          // listRes.data.data.forEach(item => {
          //   if (item.close_time === '1970-01-01 08:00:00') {
          //     item.close_time = '--'
          //   }
          // })
          this.tableData = listRes.data.list || []
          this.total = listRes.data.total
          this.unsettle_revenue=listRes.data.settledMoney // 未结算收益
            this.settle_revenue=listRes.data.unSettledMoney // 已结算收益
        // }
      } else {
        this.$message.error(listRes.message)
      }
    },
    // getStatistic(arg) {
    //   const params = {
    //     type: 2,
    //     ...arg
    //   }
    //   getIncomesStatistic(params).then(res => {
    //     if(res.code === 10000) {
    //       this.unsettle_revenue = res.data.settledMoney
    //       this.settle_revenue = res.data.unSettledMoney
    //     }
    //   })
    // },
    onExportClick() {
      const params = {
        ...this.form,
        is_export: 1
      }
      this.getData(this.query)
    },
    pageChange(page) {
      this.query.pageNum = page
  
      this.getData(y)
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    },
    handleSearch(formValue) {
      console.log(this.rongDate)
      if (this.rongDate.length) {
        this.query.beginTime = this.rongDate[0]+''
        this.query.endTime = this.rongDate[1]+''
        // delete formValue.createTime
      }
      // this.form = formValue
      // const params = {
      //   page: this.page,
      //   ...formValue
      // }
      // const statisticParams = {
      //   ...formValue
      // }
      // if (formValue.mobile && formValue.mobile !== '') {
      //   statisticParams.order_user_mobile = formValue.mobile
      //   delete statisticParams.mobile
      // }
      // if (formValue.status && formValue.status !== '') {
      //   statisticParams.order_status = formValue.status
      //   delete statisticParams.status
      // }
      // if (formValue.income_status && formValue.income_status !== '') {
      //   statisticParams.status = formValue.income_status
      //   delete statisticParams.income_status
      // }

      this.getData()
      // this.getStatistic(statisticParams)
    },
    handleReset() {

      this.query.pageNum = 1

      this.getData()
      // this.getStatistic({})
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  background-color: #fff;
  height: 100%;
  padding: 10px 20px 0 ;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    height: 30px;
    margin-bottom: 20px;
  }
  .table-box {
      height: calc(100vh - 220px);
  }
  .pagination {
    display: flex;
    width: 97%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 99;
    .text {
      color: #666
    }
  }
}
</style>
